<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <title>Flash-VideoIO | Flash-based audio and video communication</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="shortcut icon" href="http://myprojectguide.org/sites/default/files/garland_favicon.ico" type="image/x-icon" />
    <link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/book/book.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/node/node.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/defaults.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/system.css?w" />

<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/system-menus.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/user/user.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/forum/forum.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/sites/default/files/color/garland-a725207e/style.css?w" />
<link type="text/css" rel="stylesheet" media="print" href="http://myprojectguide.org/themes/garland/print.css?w" />
        <!--[if lt IE 7]>
      <link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/themes/garland/fix-ie.css" />    <![endif]-->

<style type="text/css">
pre { color: #606060; font-size: small; line-height: 1; }
pre.code { margin-left: 40px; margin-right: 40px; border: 1px dotted grey; padding: 4px 4px 4px 4px; color: #606060; }
b { color: #000000; }
ol { line-height: 1; }
div.info {margin-left: 40px; margin-right: 40px; border: 1px solid grey; padding: 4px 4px 4px 4px;}
p { text-align: justify; }
</style>

<script type="text/javascript">
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
</script>


  </head>
  <body class="sidebar-right">

<!-- Layout -->
  <div id="header-region" class="clear-block"></div>

    <div id="wrapper">

    <div id="container" class="clear-block">

      <div id="header">
        <div id="logo-floater">
        <h1><a href="index.html" title="Flash-VideoIO - Flash-based audio and video communication"><img src="http://myprojectguide.org/sites/default/files/garland_logo.png" alt="Gurukul My Project Guide" id="logo" /><span>VideoIO</span> Flash-based audio and video communication</a></h1>
        </div>

                                                    
      </div> <!-- /header -->

      
      <div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">

<div class="breadcrumb"><a href="/">Home</a> › <a href="index.html">Flash-VideoIO Tutorial</a></div>

<div id="node-1" class="node">


  
  <div class="content clear-block">

<h2>How to show live camera view?</h2>
  
<p>The <tt>live</tt> boolean property controls the live camera view in VideoIO. When set to true, the live camera view is displayed, and when set to false, the camera view is switched off. The VideoIO application automatically updates this property when you specify a publishing or recording <tt>src</tt> URL. Hence, the <tt>live</tt> property also indicates whether the camera view is on or not? Additionally, you can set it yourself in one of several ways.</p>

<p>When the camera view is enabled, the Flash Player prompts the user for permission, whether to "Allow" or "Deny" access to the camera and microphone. This gives end-user complete control over whether to enable recording from his camera and microphone on any third-party web sites. Note that this prompt is generated by Flash Player plugin, and not explicitly by the VideoIO application.</p>

<p>For trusted web sites, it is recommended to always allow the device access. Users can do so in their Flash Player settings. Right click on the VideoIO application, select the "Settings" menu option, click on the second tab titled "Privacy", then select "Allow", "Remember" and click on "Close" button. Selecting the "Remember" option will avoid the Flash Player prompt on that web site, everytime you enable your camera. A screen shot of the privacy settings is shown below.</p>

<img src="screen-privacy.png"/>

<p>To statically set the <tt>live</tt>property, use <tt>flashVars</tt> as shown below. Additionally, if you use the <tt>controls</tt> property, the video control panel can allow the user to enable or disable the camera view by clicking on the camera icon.</p>

<pre class="code">
&lt;object type="application/x-shockwave-flash" data="VideoIO.swf"
    id="video1" width="320" height="240"&gt;
    &lt;param name="movie" value="VideoIO.swf" /&gt;
    &lt;param name="quality" value="high" /&gt;
    &lt;param name="bgcolor" value="#000000" /&gt;
    &lt;param name="allowFullScreen" value="true" /&gt;
    &lt;param name="allowScriptAccess" value="" /&gt;
    &lt;param name="flashVars" value="controls=true&<b>live=true</b>" /&gt;
&lt;/object&gt;
</pre>

<p>To programmatically set the property, use JavaScript as shown below. The example shows a check box which controls the <tt>live</tt> property of the associated VideoIO application named <tt>video1</tt>. Note that JavaScript method works only if both the HTML page containing JavaScript and the VideoIO.swf are hosted on the same web site (See <a href="1.html">How to embed VideoIO in your web page?</a> for details). To see the demonstration, attach your web cam to your PC and click on the check box to enable live camera view.</p>

<table><tr valign="top"><td>
<object type="application/x-shockwave-flash" data="VideoIO.swf"
    id="video1" width="320" height="240">
    <param name="movie" value="VideoIO.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
</object>
</td><td><pre>
&lt;object type="application/x-shockwave-flash" data="VideoIO.swf"
    id="<b>video1</b>" width="320" height="240"&gt;
    &lt;param name="movie" value="VideoIO.swf" /&gt;
    &lt;param name="quality" value="high" /&gt;
    &lt;param name="bgcolor" value="#000000" /&gt;
    &lt;param name="allowFullScreen" value="true" /&gt;
    &lt;param name="allowScriptAccess" value="always" /&gt;
&lt;/object&gt;

&lt;script&gt;
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
&lt;/script&gt;

&lt;input id="<b>live1</b>" type="checkbox" autocomplete="off"
    onclick="getFlashMovie('<b>video1</b>').setProperty('<b>live</b>',
        document.getElementById('<b>live1</b>').checked)"/&gt;
</pre>
<input id="live1" type="checkbox" autocomplete="off"
    onclick="getFlashMovie('video1').setProperty('live',
        document.getElementById('live1').checked)"/>
select to enable live camera view
</td></tr></table>

<p>In VideoIO the live camera view is always flipped horizontally when displayed to appear as if you are looking in a mirror. This affects only the local video display view, but the actual media stream captured and sent to the server or remote end is not affected. We feel that mirrored view of local video gives the most natural behavior for live video chat or message recording. Please see the <a href="http://code.google.com/p/flash-mirror">flash-mirror</a> project for details on how this is done.</p>

</div>
          </div>

          <div id="footer">&copy; 2010-2011, Kundan Singh, All Rights Reserved.</div>
          
      </div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->

              <div id="sidebar-right" class="sidebar">

<div id="block-forum-0" class="clear-block block block-forum">

  <h2>In This Project</h2>

  <div class="content"><div class="item-list">
<ul><li class="first"><a href="index.html">Project Home</a></li>
</ul>
<ol>
<li class="last"><a href="1.html">Embedding</a></li>
<li class="last"><a href="2.html">Live camera view</a></li>
<li class="last"><a href="3.html">Media server</a></li>
<li class="last"><a href="4.html">Record a message</a></li>
<li class="last"><a href="5.html">Play video file</a></li>
<li class="last"><a href="6.html">Two-party call</a></li>
<li class="last"><a href="7.html">Video broadcast</a></li>
<li class="last"><a href="8.html">Multi-party conference</a></li>
<li class="last"><a href="9.html">P2P video call</a></li>
<li class="last"><a href="10.html">VideoIO API</a></li>
<li class="last"><a href="11.html">SIP/VoIP call</a></li>
</ol></div></div>
</div>

<div id="block-forum-1" class="clear-block block block-forum">

  <h2>References</h2>

  <div class="content"><div class="item-list"><ul><li class="first"><a href="http://myprojectguide.org">Gurukul - Student Project Guide</a></li>
<li class="last"><a href="http://code.google.com/p/videocity">Videocity - web video telephony and conference</a></li>
<li class="last"><a href="http://code.google.com/p/rtmplite">rtmplite - lightweight Flash media (RTMP) server in Python</a></li>
<li class="last"><a href="http://myprojectguide.org/node/6">Project Ideas on Multimedia Networking</a></li>
</ul></div></div>
</div>

              </div>

    </div> <!-- /container -->
  </div>
    </body>
</html>
